<template>
    <!-- 事件配置编辑弹框 -->
    <CommonModal v-model="state.visible" @handleOk="handleOk" @handleCancel="handleCancel" :title="state.modalTitle"
        :width="600">
        <a-form class="form_box" ref="formRef" name="custom-validation" :model="formState" :rules="rules"
            v-bind="layout">
            
            <a-form-item has-feedback label="报警事件" name="alarmCode" :colon="false" required>
                <a-select v-model:value="formState.alarmCode" 
                    placeholder="请选择报警事件"
                    allowClear>
                    <a-select-option v-for="item in getEnumOptions('alarmEvent')" :value="item.value" :key="item.value">{{ item.label }}</a-select-option>
                </a-select>
            </a-form-item>

            <a-form-item has-feedback label="风险等级" name="riskLevel" :colon="false" required>
                <a-select v-model:value="formState.riskLevel" 
                    placeholder="请选择风险等级"
                    allowClear>
                    <a-select-option v-for="item in getEnumOptions('eventLevel')" :value="item.value" :key="item.value">{{ item.label }}</a-select-option>
                </a-select>
            </a-form-item>

            <a-form-item label="重复报警控制" name="repeatCount" :colon="false">
                <a-input-number v-model:value="formState.repeatCount"  style="width: 100%;"
                autocomplete="off" placeholder="请输入" :precision="0" :min="0" :max="9999999999" />
            </a-form-item>

            <a-form-item label="报警凭证" :colon="false">
                <div class="credential-toggles">
                    <div class="credential-item">
                        <a-switch v-model:checked="formState.hasAddress" />
                        <span class="credential-label">位置凭证</span>
                        <span class="credential-desc">记录报警点位置</span>
                    </div>
                    <div class="credential-item">
                        <a-switch v-model:checked="formState.hasVideo" />
                        <span class="credential-label">视频凭证</span>
                        <span class="credential-desc">截取报警点前后的视频</span>
                    </div>
                    <div class="credential-item">
                        <a-switch v-model:checked="formState.hasImage" />
                        <span class="credential-label">照片凭证</span>
                        <span class="credential-desc">截取报警点的照片</span>
                    </div>
                </div>
            </a-form-item>

            <a-form-item has-feedback label="处理方式" name="handleType" :colon="false" required>
                <a-select v-model:value="formState.handleType" 
                    placeholder="请选择处理方式"
                    allowClear>
                    <a-select-option v-for="item in getEnumOptions('eventProcessType')" :value="item.value" :key="item.value">{{ item.label }}</a-select-option>
                </a-select>
            </a-form-item>
        </a-form>
    </CommonModal>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { message } from 'ant-design-vue'
import { getEnumOptions } from '@/utils/enum'
import { bizEventConfigAdd, bizEventConfigUpdate } from "@/service/nmcApi"
const emit = defineEmits(['success'])

const state = reactive({
    visible: false,
    modalTitle: '新增事件配置'
})

const formRef = ref()

// 表单数据
const formState = reactive({
    alarmCode: null,  // 报警事件
    riskLevel: null, // 风险等级
    repeatCount: '', // 重复报警控制
    hasAddress: true, // 位置凭证
    hasVideo: true, // 视频凭证
    hasImage: true, // 照片凭证
    handleType: null, // 处理方式
    id: '',  // 新增时为空，编辑时为id
    isActive: true
})

// 表单验证规则
const rules = {
    alarmCode: [{ required: true, message: '请选择报警事件' }],
    riskLevel: [{ required: true, message: '请选择风险等级' }],
    handleType: [{ required: true, message: '请选择处理方式' }]
}

// 表单布局
const layout = {
    labelCol: {
        span: 6
    },
    wrapperCol: {
        span: 16,
    },
}

// 显示弹窗
const showModal = (obj) => {
    state.modalTitle = obj.id ? '编辑事件配置' : '新增事件配置'
    
    if (obj.id) {
        // 编辑模式，加载现有数据
        Object.assign(formState, {
            alarmCode: obj.alarmCode || '',
            riskLevel: obj.riskLevel || '',
            repeatCount: obj.repeatCount || '',
            hasAddress: obj.hasAddress !== undefined ? obj.hasAddress : true,
            hasVideo: obj.hasVideo !== undefined ? obj.hasVideo : true,
            hasImage: obj.hasImage !== undefined ? obj.hasImage : true,
            handleType: obj.handleType || '',
            id: obj.id,
            isActive: obj.isActive
        })
    } else {
        // 新增模式，清空表单
        Object.keys(formState).forEach(key => {
            if (key === 'hasAddress' || key === 'hasVideo' || key === 'hasImage') {
                formState[key] = true
            } else {
                formState[key] = null
            }
        })
    }
    
    state.visible = true
}

// 确认
const handleOk = () => {
    formRef.value.validateFields().then(res => {
        const submitData = {
            ...formState
        }
        if(formState.id){
            bizEventConfigUpdate(submitData).then(res => {
                if (res && res.status === "000_0000_0000") {
                    message.success('修改成功')
                }
            })
        }else{
            bizEventConfigAdd(submitData).then(res => {
                if (res && res.status === "000_0000_0000") {
                    message.success('保存成功')
                }
            })
        }
        state.visible = false
        setTimeout(() => {
            emit('success', submitData)
        }, 300)
    }).catch(err => {
        // 表单验证失败
    })
}

// 取消
const handleCancel = () => {
    formRef.value.resetFields()
    state.visible = false
}

// 暴露方法给父组件
defineExpose({ showModal })
</script>

<style scoped lang="less">
.form_box {
    input,
    :deep(.ant-select-selector) {
        height: 32px;
        box-sizing: border-box;
        background: #FFFFFF;
        border-radius: 6px;
        border: 1px solid #E0E0E0;
    }

    :deep(.ant-form-item-control-input) {
        width: 250px;
    }
}

.credential-toggles {
    .credential-item {
        display: flex;
        align-items: center;
        margin-bottom: 12px;

        .credential-label {
            margin-left: 8px;
            font-weight: 500;
            min-width: 80px;
        }

        .credential-desc {
            margin-left: 8px;
            color: #666;
            font-size: 12px;
        }
    }
}
</style> 